<!-- 聊天item -->
<template>
	<view class="chat-item">
		<text class="chat-time" v-if="item.time&&item.time.length">
			{{item.time}}
		</text>
		<view :class="{'chat-container':true,'chat-location-me':item.isMe}">
			<view class="chat-icon-container">
				<image class="chat-icon" :src="item.icon" mode="aspectFill" />
			</view>
			<view class="chat-content-container">
				<text :class="{'chat-user-name':true,'chat-location-me':item.isMe}">
					{{item.name}}
				</text>
				<view :class="{'chat-text-container':true,'chat-text-container-me':item.isMe}">
					<text selectable user-select v-if="item.status==2||item.status==1||item.status==-1" :class="{'char-text':true,'char-text-me':item.isMe}">{{item.content}}</text>
					<text class="cursor" v-if="item.status==2"></text>
					<view class="loading" v-if="item.status==0">
					   <view class="loading__bar"></view>
					   <view class="loading__bar"></view>
					   <view class="loading__bar"></view>
					   <view class="loading__bar"></view>
					   <view class="loading__bar"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"chat-item",
		props: {
			item: {
				type: Object,
				default: function() {
					return {
						time: '',
						icon: '',
						name: '',
						content: '',
						isMe: false,
						isLoading:false
					}
				}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped>
	.chat-item{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}
	.chat-time{
		padding: 4rpx 0rpx;
		text-align: center;
		font-size: 22rpx;
		color: #aaaaaa;
	}
	.chat-container{
		display: flex;
		flex-direction: row;
	}
	.chat-location-me{
		flex-direction: row-reverse;
		text-align: right;
	}
	.chat-icon-container{
		margin-top: 12rpx;
	}
	.chat-icon{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #eeeeee;
	}
	.chat-content-container{
		margin: 0rpx 15rpx;
	}
	.chat-user-name{
		font-size: 26rpx;
		color: #888888;
	}
	.chat-text-container{
		background-color: #F3F4F5;
		border-radius: 8rpx;
		padding: 10rpx 15rpx;
		margin-top: 10rpx;
		/* #ifndef APP-NVUE */
		max-width: 500rpx;
		/* #endif */
	}
	.chat-text-container-me{
		background-color: #4975E9;
	}
	.char-text{
		font-size: 28rpx;
		/* #ifndef APP-NVUE */
		word-break: break-all;
		/* #endif */
		/* #ifdef APP-NVUE */
		max-width: 500rpx;
		/* #endif */
	}
	.char-text-me{
		color: white;
	}
	
	
	.loading {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.loading__bar {
	  height: 40rpx;
	  width: 8rpx;
	  margin: 0 4rpx;
	  border-radius: 4rpx;
	  animation: loading 1s ease-in-out infinite;
	}
	
	.loading__bar:nth-child(1) {
	   background-color: #E0E0E0;
	   animation-delay: -0.4s;
	}
	
	.loading__bar:nth-child(2) {
	   background-color: #C3C3C3;
	   animation-delay: -0.3s;
	}
	
	.loading__bar:nth-child(3) {
	   background-color: #A7A7A7;
	   animation-delay: -0.2s;
	}
	
	.loading__bar:nth-child(4) {
	   background-color: #8B8B8B;
	   animation-delay: -0.1s;
	}
	
	.loading__bar:nth-child(5) {
	   background-color: #6E6E6E;
	   animation-delay: 0s;
	}
	
	@keyframes loading {
	  0% {
	     transform: scaleY(0.1);
	  }
	  50% {
	     transform: scaleY(1);
	  }
	  100% {
	     transform: scaleY(0.1);
	  }
	}
	
	
	/* 光标动画 */
	@keyframes cursor {
	    0% {
	        opacity: 0;
	    }
	    50% {
	        opacity: 1;
	    }
	    100% {
	        opacity: 0;
	    }
	}
	/* 光标样式 */
	.cursor {
	    display: inline-block;
	    width: 2px;
	    height: 28rpx;
	    background-color: black;
	    animation: cursor 1s infinite;
		position: relative;
		top: 2px;
	}
</style>